<template>
  <div>
    <!-- 头部 -->
    <header>
      <div class="logo-container">
        <h1>
          <img src="../../images/logo.jpg" alt="">
        </h1>
        <h3>欢迎登录</h3>
        <div class="home">
          <div class="enter-home" @click="goHome">
            进入网站首页
            <span class="icon-one">
              <el-icon color="#27ba9b"><ArrowRight /></el-icon>
            </span>
            <span class="icon-two">
              <el-icon><ArrowRight /></el-icon>
            </span>
          </div>
        </div>
      </div>
    </header>
    <!-- 表单部分 -->
    <section>
      <div class="wrapper">
        <div class="nav">
          <div :class="userColor ? 'color' : 'user'" @click="userLogin">账户登录</div>
          <div :class="codeColor ? 'color' : 'code'" @click="codeLogin">扫码登录</div>
        </div>
        <!-- 用户登录 -->
        <div v-if="userColor">
          <div class="message-wrapper">
            <div class="message" @click="noteLogin">
              使用{{ noteVisble ? '短信' : '账号' }}登录
              <span class="icon">
                <el-icon color="#27ba9b"><Message /></el-icon>
              </span>
            </div>
          </div>
          <el-form
            class="form"
            :model="LoginFormRef"
            ref="LoginFormRef"
            :ruls="ruleFormRef"
          >
            <!-- 用户名 -->
            <el-form-item
              v-if="noteVisble"
            >
              <el-input
                v-model="account"
                placeholder="请输入用户名"
                class="username"
              >
                <template #prepend>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item
              v-else
              :rules="[
                {required: true, message: '请输入用户名'}
              ]"
            >
              <el-input
                v-model="account"
                placeholder="请输入手机号"
                class="username"
              >
                <template #prepend>
                  <el-icon><User /></el-icon>
                </template>
              </el-input>

            </el-form-item>
            <!-- 密码 -->
            <el-form-item
              v-if="noteVisble"
              :rules="[
                {required: true, message: '请输入密码'}
              ]"
            >
              <el-input
                v-model="password"
                placeholder="请输入密码"
                class="password"
              >
                <template #prepend>
                  <el-icon><Lock /></el-icon>
                </template>
              </el-input>
            </el-form-item>

            <!-- 验证码 -->
            <el-form-item
              v-else
              :rules="[
                {required: true, message: '请输入验证码'}
              ]"
            >
              <el-input
                v-model="password"
                placeholder="请输入验证码"
                class="password"
              >
                <template #prepend>
                  <el-icon><CircleCheck /></el-icon>
                </template>
                <template #append>
                  <span class="send-code">发送验证码</span>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item
              :rules="[
                {required: true, message: '请输入验证码'}
              ]"
            >
              <div class="agree">
                <el-checkbox checked>
                  我已同意
                  <a href="">《隐私条款》</a>
                  和
                  <a href="">《服务条款》</a>
                </el-checkbox>
              </div>
            </el-form-item>
            <el-form-item>
              <div class="btn" @click="login">
                登录
              </div>
            </el-form-item>

          </el-form>

          <div class="footer">
            <div class="qq">
              <img src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png " alt="">
            </div>
            <div>
              <span>忘记密码</span>
              <span>免费注册</span>
            </div>
          </div>
        </div>
        <!-- 扫码登录 -->
        <div v-else class="code-login">
          <img src="../../images/code.jpg" alt="">
          <p>
            打开
            <span>
              小兔鲜App
            </span>
            扫码登录
          </p>
        </div>

      </div>
    </section>
    <!-- 版权声明 -->
    <footer>
      <div class="footer-container">
        <div>
          <div class="statement">
            <span>关于我们</span>
            <span>|</span>
            <span>帮助中心</span>
            <span>|</span>
            <span>售后服务</span>
            <span>|</span>
            <span>配送和验收</span>
            <span>|</span>
            <span>商务合作</span>
            <span>|</span>
            <span>搜索推荐</span>
            <span>|</span>
            <span>友情链接</span>
          </div>
          <div class="copyright">
            CopyRight©小兔鲜儿
          </div>
        </div>
      </div>
    </footer>
  </div>
</template>
<script name="home" setup>
// hooks钩子函数
// 组合式API
import { ref, reactive } from 'vue';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { useRouter, useRoute } from 'vue-router';
import { FormInstance } from 'element-plus';
const LoginFormRef = ref();

const store = useStore();
const router = useRouter();
const route = useRoute();
const account = ref('');
const password = ref('');
const codeColor = ref(false);
const userColor = ref(true);
const noteVisble = ref(true);
const ruleFormRef = reactive < FormRules > ({
  username: [
    { required: true,
      message: 'Please input Activity username',
      trigger: 'blur' },
  ],
  password: [
    { required: true,
      message: 'Please input Activity password',
      trigger: 'blur' },
  ],
});

async function login() {
  const res = await store.dispatch('user/login', {
    account: account.value,
    password: password.value,
  });
  if (res.success) {
    ElMessage({
      message: '登录成功',
      type: 'success',
    });
    router.push('/');
  } else {
    ElMessage.error(res.msg);
  }
}
function goHome() {
  router.push('/');
}
function codeLogin() {
  codeColor.value = true;
  userColor.value = false;
}
function userLogin() {
  userColor.value = true;
  codeColor.value = false;
}
function noteLogin() {
  noteVisble.value = !noteVisble.value;
}

</script>

<style lang="scss" scoped>
a{
    text-decoration: none;
    color: #006699;
  }
  header{
    height: 132px;
    width: 100%;
    .logo-container{
      margin: 0 auto;
      width: 1240px;
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      h1{
        img{
          height: 132px;
          cursor: pointer;
        }
      }
      h3{
        flex: 1;
        margin: 0 0 38px 20px;
        font-size: 28px;
        color: #666666;
        font-weight: 400;
      }
      .home{
        display: flex;
        align-items: center;
        margin-bottom: 38px;
        font-size: 18px;
        cursor: pointer;
        .enter-home{
          position: relative;
          .icon-one{
            position: absolute;
            color: #27ba9b;
            top: 3px;
            right: -20px;
          }
          .icon-two{
            position: absolute;
            color: #27ba9b;
            top: 3px;
            right: -30px;
          }
        }
      }
    }
  }
  section{
    margin-top: 40px;
    height: 488px;
    background: url(../../images/summer.jpg);
    position: relative;
    .wrapper{
      width: 380px;
      height: 400px;
      background-color: #fff;
      position: absolute;
      top: 54px;
      left: 50%;
      transform: translateX(220px);
      .nav{
        box-sizing: border-box;
        padding: 0 40px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;
        font-size: 18px;
        .user{
          width: 50%;
          border-right: 1px solid #eee;
          cursor: pointer;
        }
        .color{
          color: #27ba9b;
          font-weight: 800;
        }
        .code{
          cursor: pointer;
        }
      }
      .message-wrapper{
        padding: 15px 40px;
        text-align: right;
        color: #27ba9b;
        cursor: pointer;
        .message{
          position: relative;
          .icon{
            position: absolute;
            top: 3px;
            right: 100px;
          }
        }
      }
      .code-login{
        padding-top: 40px;
        text-align: center;
        font-size: 14px;
        p{
          span{
            color: #27ba9b;
            font-size: 16px;
          }
        }
      }
    }
    .form{
      padding: 0 40px;
      .username{
        margin-bottom: 10px;
      }
      .agree{
        margin: 10px 0;
      }
      .btn{
        width: 100%;
        height: 40px;
        line-height: 40px;
        text-align: center;
        background: #27ba9b;
        color: #fff;
        cursor: pointer;
      }
      .send-code{
        cursor: pointer;
      }
    }
    .footer{
      display: flex;
      justify-content: space-between;
      padding: 10px 40px;
      span{
        cursor: pointer;
        margin-left: 10px;
        color: #999999;
      }
      .qq{
        cursor: pointer;
      }
    }
  }
  footer{
    padding: 30px 0 50px 0;
    .footer-container{
      text-align: center;
      color: #999999;
      .statement{
        padding-top: 20px;
        span{
          padding: 0 8px;
        }
      }
      .copyright{
        padding-top: 20px;
      }
    }
  }
  ::v-deep .el-input-group__prepend{
        background: #cfcdcd;
        padding: 0 10px;
        color: #fff;
  }
  ::v-deep .el-checkbox__input.is-checked+.el-checkbox__label{
    color: #27ba9b;
  }
  ::v-deep .el-checkbox__input.is-checked .el-checkbox__inner{
    background-color: #27ba9b;
  }

</style>


